<!-- @format -->
<template>
  <div id="format">
    <div class="search-title">
      <van-nav-bar left-arrow @click-left="onClickLeft">
        <template #title>
          <van-search v-model="value" placeholder="请输入搜索关键词"/>
        </template>
        <template #left>
          <van-icon name="arrow-left" color="white" size="18" />
        </template>
      </van-nav-bar>
    </div>
    <div class="search-page">
      <van-tabs v-model="active" title-active-color="red" line-height="0" title-class="pages">
        <van-tab title="综合">
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
          >
          
          <div class="shopcard" v-for="(item,index) in listone" :key="index">
            <img :src="item.product.pic" alt="">
          </div>
          </van-list>
        </van-tab>
        <van-tab title="销量">内容 2</van-tab>
        <van-tab title="价格">内容 3</van-tab>
        <van-tab title="新品">内容 4</van-tab>
      </van-tabs>
    </div>
    
  </div>
</template>

<script>
import {getsearch} from '../../main'
export default {
  data() {
    return {
      title:['综合','销量','价格','新品'],
      value: "",
      active: 2,
      listone:[],
      page1:1,
      page1s:1,
      listTwo:[],
      listThreeUp:[],
      listThreeDwon:[],
      listFour:[],
      loading: false,
      finished: false,
    };
  },
  async created() {
    await this.pageone()
    const listTwo = await getsearch(1,'SALE_D')
    this.listTwo=listTwo.data.data.list
    const listThreeUp = await getsearch(1,'PRICE_A')
    this.listThreeUp=listThreeUp.data.data.list
    const listThreeDwon = await getsearch(1,'PRICE_D')
    this.listThreeDwon=listThreeDwon.data.data.list
    const listFour = await getsearch(1,'TIME_D')
    this.listFour=listFour.data.data.list
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    async pageone(){
      if (this.page1s >this.page1) {
        console.log(1);
        this.finished = true;
      }
      const res =await getsearch(this.page1s,'')
      console.log(res);
      this.listone=[...this.listone,...res.data.data.list]
      this.page1=res.page1s
      console.log(res.page1s);
      this.loading = false;
      this.page1s++
    },
    onLoad() {
        this.pageone()

    },
    a(){
      console.log(1);
    }
  }
};
</script>

<style lang="scss">
#format{
  padding: 0;
  margin: 0;
}
.van-nav-bar__content {
  background-image: linear-gradient(270deg, #11eff7, #2aa8f0),
    linear-gradient(#fff, #fff);
}
// /deep/.van-tabs__nav--line .an-tabs__nav{
//   margin: 0;
// }
.van-search{
  padding: 0;
}
.search-page{
  padding: 0 .266667rem;
  background: rgb(240, 239, 239);
}
.van-tabs__nav--line{
  margin: .133333rem .266667rem;
}
</style>
